<template>
  <div>
    <el-upload
      :data="{ directory: '/' }"
      :action="setting.uploadUrl"
      list-type="picture-card"
      multiple
      :on-success="handleSuccess"
      :on-preview="handlePreview"
      :file-list="modelValue"
      :on-remove="handleRemove"
      :limit="3"
      accept="image/*"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
    <el-dialog v-model="isShow" style="text-align: center" width="640">
      <img :src="imageUrl" alt />
    </el-dialog>
  </div>
</template>
<script setup>
import { Plus } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import setting from "@/settings.js";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
});
const isShow = ref(false);
const imageUrl = ref(null);
const handleRemove = (file, fileList) => {
  emit("update:modelValue", fileList);
};
const handlePreview = (file) => {
  console.log(file, "handlePreview");
  imageUrl.value = file.url;
  isShow.value = true;
};
const handleSuccess = (res, file, fileList) => {
  console.log(file, "handleSuccess");
  let pfileList = [...props.modelValue];
  if (fileList.every((item) => item.status == "success")) {
    fileList.map((item) => {
      item.response &&
        pfileList.push({
          url: item.response.data.urlFull,
        });
    });
    emit("update:modelValue", pfileList);
  }
};
onMounted(() => {
  console.log(props.modelValue);
});
</script>
